// 有三种常用的代码分离方法：

// 1、入口起点：使用 entry 配置手动地分离代码。
// 这种方法存在一些问题:
// 如果入口 chunks 之间包含重复的模块，那些重复模块都会被引入到各个 bundle 中。
// 这种方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码。

// 2、防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
// CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。(已过时) 
// webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

// 3、动态导入：通过模块的内联函数调用来分离代码。
// 对于动态导入，第一种，也是优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。
// 第二种，则是使用 webpack 特定的 require.ensure。
// import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import()，记得使用 一个 polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    // another: './src/another-module.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'Code Splitting'
    }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'common' // 指定公共 bundle 的名称。
    // })
  ],
  // optimization: {
  //   splitChunks: {
  //     chunks: 'all',
  //     name: 'common'
  //   }
  // },
  output: {
    filename: '[name].bundle.js',
    // 决定非入口 chunk 的名称。
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};